<template>
  <el-dialog width="60%" title="竞标详情" :visible.sync="showDia" @close="handleClose">
    <el-row style="margin-top:20px">
      <div>
        <h3 class="title">收货信息</h3>
        <el-row :span="20" v-if="order.address">
          <el-col :span="8">
            <span>联系人: {{order.address.contact_name}}</span>
          </el-col>
          <el-col :span="8">
            <span>联系电话: {{order.address.contact_phone}}</span>
          </el-col>
          <el-col :span="8">
            <span>详细地址: {{order.address.full_address}}</span>
          </el-col>
        </el-row>
        <el-row :span="20" v-else>
          <el-col :span="8">
            <span>联系人:</span>
          </el-col>
          <el-col :span="8">
            <span>联系电话:</span>
          </el-col>
          <el-col :span="8">
            <span>详细地址:</span>
          </el-col>
        </el-row>
        <div>买家留言: {{order.remark}}</div>
      </div>
      <!-- <h3 class="title">基本信息</h3>
      <div>买家备注: {{order.remark}}</div>-->
    </el-row>
    <el-row>
      <h3 class="title">商品信息</h3>
      <el-table :data="order.product" stripe style="width: 100%">
        <el-table-column label="商品描述" width="200">
          <template slot-scope="scope">
            <div style="flex-direction: row;align-items: center;">
              <img
                :src="scope.row.snapshot.cover"
                style="width:40px;height:40px;vertical-align: middle;"
              >
              <span style="margin-left: 10px">{{ scope.row.snapshot.title }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="auto">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.snapshot.sku }}</span>
          </template>
        </el-table-column>
        <el-table-column label="参考单价">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.snapshot.price}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="数量">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.count}}</span>
          </template>
        </el-table-column>
        <el-table-column label="小计">
          <template slot-scope="scope">
            <span
              style="margin-left: 10px"
            >{{ (scope.row.snapshot.price*scope.row.count) | numFilter}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="margin-top:20px">
      <span style="font-size:14px;float:right">共 {{productCount}} 件商品 合计：￥{{totalAmount}}（不含运费）</span>
    </el-row>
  </el-dialog>
</template>

<script>
/* eslint-disable */
import { isNull, arr2pojo, obj2pojo, validateResponse } from "@/util/util";
import { successMsg, errorMsg } from "@/util/message"

export default {
  name: "bidDetail",
  props: ['method'],
  components: {
  },
  filters: {
    numFilter: function (value) {
      let realVal = Number(value).toFixed(2)
      return realVal
    }
  },
  computed: {
    productCount() {
      if (isNull(this.order.product)) return 0
      return this.order.product.length
    },
    totalAmount() {
      if (isNull(this.order.product)) return 0
      let total = 0
      this.order.product.forEach(element => {
        total += element.snapshot.price * element.count
      });
      return total
    },
  },
  data() {
    return {
      showDia: false,
      order: ""
    }
  },
  methods: {
    mapFlag(value) {
      var result = ''
      let flag = [
        { label: '待付款', value: 0 },
        { label: '订单取消', value: 1 },
        { label: '等待发货', value: 2 },
        { label: '等待发货', value: 3 },
        { label: '订单取消', value: 4 },
        { label: '待用户确认取消', value: 5 },
        { label: '订单取消', value: 6 },
        { label: '已发货', value: 7 },
        { label: '已完成', value: 8 },
      ]
      flag.forEach(element => {
        if (element.value == value)        {
          result = element.label
          return false
        }
      });

      return result
    },
    handleShow(id) {
      this.showDia = true
      console.log(this.method)
      this.$store.dispatch(this.method, { id: id }).then(res => {
        if (res.data.status == 1)
        {
          this.order = res.data.result.data
        }
        else        {
          this.order = []
        }
      })
    },
    handleClose() {
      this.showDia = false
      this.order = []
    }
  }
}

</script>